<template>
    <div id="app">
        <el-container>
            <el-header height="34px" style="padding: 0">
                <div style="background-color: #f9f9f9; width: 1200px;margin: 0 auto; position: relative;line-height: 0px; ">

                </div>
            </el-header>

            <div class="logo_line">
                <div class="step_bar">
                    <div class="shopping_procedure">
                        <ul class="Steps">
                            <li class="">我的购物车</li>
                            <li class="">填写订单</li>
                            <li class="active">完成订单</li>
                        </ul>
                    </div>
                    <div class="logo">
                        <a href="http://localhost:8500/about">
                            <img src="img.png" alt=""
                                 class="shoppingCar_img">
                        </a>
                    </div>
                </div>
            </div>
            <div style="margin: 0 auto">
                <div style="width: 960px">
                    <div><img
                            src=""
                            alt=""
                            style="float: left;width: 250px;height: 300px"
                    >
                        <p @click="threeGo()" style="color:#FF6666;font-size: 26px;font-family: 楷体;padding-top: 150px;padding-left: 300px">
                            购物完成,将在{{count}}秒后跳转主页面,欢迎您下次再购</p>
                        <el-button style="margin-left: 200px" type="info" round>
                        <a href="http://localhost:8500/about" style="font-size: 26px;font-family: 楷体;color: #f2f5f6">立即跳转</a>
                        </el-button>
                       <!-- <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Icz3ChEPFOcddltLfy7pbgHaHa?w=212&h=212&c=7&r=0&o=5&dpr=1.3&pid=1.7"
                             alt="" style="width: 50px;height: 50px">-->
                    </div>
                </div>
            </div>

            <div style="margin: 0 auto">
                <!--<div style="background-color: red ;width: 1000px ;height: 30px;position: relative"></div>-->
                <div style="margin-top: 50px">
                    <template>
                        <div>
                            <div class="swiper-container" :options="swiperOption" @change="swiperChange"
                                 style="border: 1px solid #dcdcdc">
                                <span style="font-size: 16px;font-weight: bold;margin-left: 10px;margin-top: 10px;">还为您推荐了以下商品</span>
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/7/8/25300645-1_b_6.jpg" alt="">魔兽世界编年史第三卷</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/61/26/27949345-1_b_2.jpg" alt="">司命</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x8.ddimg.cn/7/10/28499038-1_b_11.jpg" alt="">吞噬星空典藏版1 我吃西红柿</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x1.ddimg.cn/77/28/29212601-1_b_2.jpg" alt="">吞噬星空典藏版7</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/34/23/29139595-1_b_15.jpg" alt="">龙族</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x6.ddimg.cn/30/23/29137116-1_b_3.jpg" alt="">吞噬星空典藏版5</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.jd.com"><img
                                            src="http://img3x1.ddimg.cn/91/11/29426851-1_b_2.jpg" alt="">哑舍新版套装（全套1-6册）</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x8.ddimg.cn/26/2/25230968-1_b_5.jpg" alt="">星辰变 典藏版1
                                        我吃西红柿</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x9.ddimg.cn/36/34/28530549-1_b_10.jpg" alt="">吞噬星空典藏版2</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/7/8/25300645-1_b_6.jpg" alt="">魔兽世界编年史第三卷</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/61/26/27949345-1_b_2.jpg" alt="">司命</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x8.ddimg.cn/7/10/28499038-1_b_11.jpg" alt="">吞噬星空典藏版1 我吃西红柿</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x1.ddimg.cn/77/28/29212601-1_b_2.jpg" alt="">吞噬星空典藏版7</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/34/23/29139595-1_b_15.jpg" alt="">龙族</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x6.ddimg.cn/30/23/29137116-1_b_3.jpg" alt="">吞噬星空典藏版5</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.jd.com"><img
                                            src="http://img3x1.ddimg.cn/91/11/29426851-1_b_2.jpg" alt="">哑舍新版套装（全套1-6册）</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x8.ddimg.cn/26/2/25230968-1_b_5.jpg" alt="">星辰变 典藏版1
                                        我吃西红柿</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x9.ddimg.cn/36/34/28530549-1_b_10.jpg" alt="">吞噬星空典藏版2</a>
                                    </div>

                                </div>
                                <!-- 分页器 -->
                                <div class="swiper-pagination"></div>

                                <!-- 导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>

                                <!-- 滚动条 -->
                                <!--<div class="swiper-scrollbar"></div>-->
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </el-container>
        <div class="footer">
            <div class="footer_box">
                <div class="footer_copyright">
                    <span>Copyright (C) 书笺小驿 2022.10.1-2022.12.1, All Rights Reserved</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper'

    export default {
        data() {
            return {
                count: '',//倒计时
                swiperOption: [{}],

            }
        },


        methods: {
            //3秒后进入跳转页面
            threeGo() {
                const TIME_COUNT = 10;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                            //跳转的页面写在此处
                            this.$router.push({
                                path: '/about'
                            });
                        }
                    }, 1000)
                }
            },
            swiperChange() {

            },


        },
        mounted() {
            {
                new Swiper('.swiper-container', {
                    //direction: 'vertical', // 垂直切换选项
                    //loop: true, // 循环模式选项
                    // 分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },

                    // 前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    slidesPerView: 5,      //行
                    slidesPerColumn: 2,    //列
                    slidesPerGroup: 5,
                    spaceBetween: 10,       //间隙
                    slidesPerColumnFill: 'column', //顺序
                    autoplay: true,         //自动切换下一页 循环
                    pauseOnMouseEnter: true//鼠标悬停暂停
                })
            }
        },

        created() {
            // 初始化省市区
            this.threeGo();
        },


    }
</script>

<style scoped>
    @import '../style/finishOrder.css';
</style>>